import React, { Component } from 'react'
import LabelList from './LabelList'
import style from './Label.module.scss'
import { connect } from "react-redux";
import { removeEmptyField } from '../compoent/emptyFild'
import moment from 'moment';
import AddLabel from './component/AddLabel'
import {
    Form,
    Input,
    Button,
    Modal,
    DatePicker
} from 'antd';

class Label extends Component {
    state = {
        visible: false,
        type: '',
        parents:[]


    }
    componentDidMount() {
        this.props.list({ page: 1, size: 10 })
        this.props.parentTag();

        const {parentTagData} = this.props
        const  parents =[{id:0,name:'一级分类'}]
        parentTagData.map(item=>{
            let obj ={}
            obj.id=item.id;
            obj.name=item.caption;
            parents.push(obj)
        })
        this.setState({parents})
    }
    onFinish = (values) => {

        const beginTime = values.beginTime
        values.beginTime = beginTime ? moment(beginTime[0]).format('YYYY-MM-DD') : ''
        values.endTime = beginTime ? moment(beginTime[1]).format('YYYY-MM-DD') : ''

        if (values) {
            //
            values.page = 1
            values.size = 10
            let newValues = removeEmptyField(values)
            this.props.list(newValues)
        } else {
            this.props.list()
        }

    };
    onFinishFailed = (errorInfo) => {

    };
    onChange = (value) => {

        this.setState({ num: value })

    }
    onChange1 = (value) => {
        this.setState({ num1: value })

    }
    addLabel = () => {
        this.setState({
            visible: true,
            type: '0'
        })
    }
    handleCancel = () => {
        this.setState({
            visible: false
        })
    }
    render() {
        const { RangePicker } = DatePicker;
        const { visible, type ,parents} = this.state

        return (
            <div>
                <div className={style.top}>
                    <Form
                        style={{ marginTop: 20, marginLeft: 20 }}
                        name="basic"
                        layout='inline'
                        // wrapperCol={{ span: 6 }}
                        onFinish={this.onFinish}
                        autoComplete="off"

                    >
                        <Form.Item
                            style={{ width: 320 }}
                            label="ID："
                            name="id"
                        >
                            <Input placeholder='请输入id查询' />
                        </Form.Item>
                        {/* <Form.Item
                            style={{ width: 250, marginLeft: 20 }}
                            label="类型："
                        // name="ownerId"
                        >
                            <Select
                                showSearch
                                placeholder='请选择订单类型'

                            >
                                {updateListData.map((item) => (
                                    <Option key={item.id} value={item.id}>
                                        {item.caption}
                                    </Option>
                                ))}
                            </Select>
                        </Form.Item> */}

                        <Form.Item
                            style={{ marginTop: 0 }}
                            label="开始时间"
                            name="beginTime"
                        // rules={[{ message: 'Please input your username!' }]}
                        >
                            <RangePicker
                                ranges={{
                                    // Today: [moment(), moment()],
                                    '本周': [moment().startOf('week'), moment().endOf('week')],
                                    '本月': [moment().startOf('month'), moment().endOf('month')],
                                }} />


                        </Form.Item>
                        <Form.Item style={{ marginLeft: 100, marginTop: 0 }}>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                            <Button type="primary" htmlType='reset' style={{ marginLeft: 42 }}>
                                重置
                            </Button>
                            <Button onClick={this.addLabel} type="primary" style={{ marginLeft: 30 }}>
                                新增
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className={style.middle}>
                    <LabelList parent={parents} />

                </div>
                <div>
                    <Modal destroyOnClose visible={visible} title='新增' footer={null} onCancel={this.handleCancel} handleCancel={this.handleCancel}>
                        <AddLabel handleCancel={this.handleCancel} type={type} parent={parents}></AddLabel>
                    </Modal>
                </div>
            </div>
        )
    }
}
const mapState = state => ({
    ...state.label

});

const mapDispatch = dispatch => ({
    ...dispatch.label
})

export default connect(mapState, mapDispatch)(Label);